<template>
  <div class="page-content">
    <div class="page-inner">
      <div>
        <el-form>
          <el-row :gutter="20">
            <!-- <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="订单号">
                <el-input
                  clearable
                  prefix-icon="Search"
                  v-model.trim="queryParams.sn"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="商品名称">
                <el-input
                  clearable
                  prefix-icon="Search"
                  v-model.trim="queryParams.goodsName"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="订单状态">
                <el-select
                  v-model="queryParams.orderStatus"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option :label="item.label" :value="item.value" v-for="item in orderStatusList" :key="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="商家">
                <el-select
                  v-model="queryParams.sellerId"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option :label="item.name" :value="item.id" v-for="(item, index) in shopList"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col  :xs="24" :sm="12" :lg="6">
              <el-form-item label="创建时间">
                <el-date-picker 
                  v-model="queryParams.timeList" 
                  type="daterange" 
                  start-placeholder="开始时间"
                  end-placeholder="结束时间" 
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 100%" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <div style="display: flex;justify-content: flex-start;align-items: center; width: 100%;">
                <div>
                  <el-button type="primary" icon="Search" @click="SrarchList">搜索</el-button>
                  <el-button icon="Refresh" @click="handleReset">重置</el-button>
                </div>
                <div style="font-weight: bold;margin-left: 30px;">
                  <span>优惠金额：<span style="color: #ce723b;">{{ payPriceCountObj.discountPrice ?? '--' }}</span> 元</span>
                  &nbsp;&nbsp;&nbsp;
                  <span>实付金额：<span style="color: #ce723b;">{{ payPriceCountObj.flowPrice ?? '--' }}</span> 元</span>
                  
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table
        :data="dataList"
        v-loading="loading"
        ref="table"
        style="margin-top: 20px"
      >
        <el-table-column label="#" type="index" align="left" />
        <el-table-column label="订单信息" align="left" width="200px">
          <template #default="scope">
            <div style="display: flex; flex-direction: column;">
              <span style="font-weight: bold;" :style="{color:orderStatusList.find(item=>item.value===scope.row.orderStatus)?.color}">
                {{ orderStatusList.find(item=>item.value===scope.row.orderStatus)?.label }}
              </span>
              <span><span>订单号：</span> <span>{{ scope.row.sn || '--' }}</span></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品信息" align="left" min-width="150px">
          <template #default="scope">
            <div 
              style="display: flex; justify-content: flex-start;align-items: center;"
              v-for="(i, index) in scope.row.itemList||[]"
              :key="i.id"
            >
              <!-- <span>{{ index+1 }}：</span> -->
              <ImagePreview
                :src="i.goodsCover"
                width="30px"
                height="30px"
              /> 
              <div style="display: flex; flex-direction: column; justify-content: space-between; align-items: start; margin-left: 10px;">
                <span class="context" style="font-size: 14px;">{{ i.goodsName ?? '--' }}</span>
                <!-- <span>SN: {{ i.goodsSn ?? '--' }}</span> -->
                <span>
                  <span style="font-weight: bolder;margin-right: 15px;">￥{{ i.goodsPrice ?? '--' }}</span>
                  <span v-show="i.goodsNum" style="font-weight: bold;color: #f44747;">×{{ i.goodsNum }}</span>
                </span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="价格信息" align="left" width="200px">
          <template #default="scope">
            <div style="display: flex; flex-direction: column;">
              <span><span>成本价：</span> <span>{{ scope.row.costPrice ?? '--' }}元</span></span>
              <span><span>商品总价：</span> <span>{{ scope.row.goodsPrice ?? '--' }}元</span></span>
              <span><span>支付价格：</span> <span>{{ scope.row.flowPrice ?? '--' }}元</span></span>
              <span v-if="scope.row.discountPrice!=0"><span>优惠金额：</span> <span>{{ scope.row.discountPrice ?? '--' }}元</span></span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="订单信息" align="left" min-width="150px">
          <template #default="scope">
            <div style="display: flex; flex-direction: column;">
              <span v-if="scope.row.createTime"><span>创建时间：</span> <span>{{ scope.row.createTime || '--' }}</span></span>
              <span v-if="scope.row.payTime"><span>支付时间：</span> <span>{{ scope.row.payTime || '--' }}</span></span>
              <span v-if="scope.row.cancelTime"><span>取消时间：</span> <span>{{ scope.row.cancelTime || '--' }}</span></span>
              <span v-if="scope.row.completeTime"><span>完成时间：</span> <span>{{ scope.row.completeTime || '--' }}</span></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="其他信息" align="left" min-width="150px">
          <template #default="scope">
            <div style="display: flex; flex-direction: column;">
              
              <span><span>店铺名称：</span> <span>{{ scope.row.sellerName || '--' }}</span></span>
              <span><span>支付流水号：</span> <span>{{ scope.row.outTradeNo || '--' }}</span></span>
              <span><span>赠送积分：</span> <span>{{ scope.row.integral ?? '--' }}</span></span>
            </div>
          </template>
        </el-table-column>



        
        <!-- <el-table-column fixed="right" label="操作" align="left">
          <template #default="scope">
            <div style="display: flex; justify-content: center">
              <el-button
                type="primary"
                size="small"
                icon="Edit"
                @click="proxy.$refs.addAndEditRef.init('edit', scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                icon="Delete"
                @click="handleDel(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <Pagination
        v-show="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </div>
    <addAndEdit ref="addAndEditRef" @success="success" v-if="!loading" />
  </div>
</template>
<script setup>
import addAndEdit from './addAndEdit'
import { 
  listPage, 
  // info, 
  // priceCount, 
  payPriceCount 
} from '@/api/order/seller.js'
import { listPage as shopListApi } from '@/api/operates/shopList/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCurrentInstance, onBeforeMount, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const { proxy } = getCurrentInstance() //proxy
const loading = ref(false)
const dataList = ref([]) //优惠券列表数据
const orderStatusList = [
  {label:'未支付', value:'UNPAID', color:'#e53d30'},
  {label:'已支付', value:'PAID', color:'orange'},
  {label:'已完成', value:'COMPLETE', color:'#0dbc79'},
  {label:'已取消', value:'CANCEL', color:'#756f59'},
]
const total = ref(0)
// const priceCountNo = ref(0)
const payPriceCountObj = ref({
  discountPrice: undefined,
  flowPrice: undefined,
})

const shopList = ref([])

const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  couponName: '',
  status: '',
  timeList:[],
})
onBeforeMount(() => {
  getShopList()
  getList()
})
// 获取商家数据
function getShopList(){
  shopListApi({pageNum:1, pageSize:100000}).then((res)=>{
    shopList.value = res.data.list
  })
}

//获取列表数据
const getList = () => {
  loading.value = true
  let query = {
    ...queryParams.value,
    startTime: queryParams.value.timeList.length ? queryParams.value.timeList[0] + ' 00:00:00' : undefined,
    endTime: queryParams.value.timeList.length ? queryParams.value.timeList[1] + ' 23:59:59' : undefined,
  }
  delete query.timeList

  // 获取统计
  // getPriceCount()
  getPayCount()
  // 获取列表
  listPage(query)
    .then(res => {
      dataList.value = res.data.list
      total.value = res.data.total
      loading.value = false
    })
    .catch(err => {
      loading.value = false
      ElMessage.error(err.message || `${text}失败`)
    })
}
//获取优惠金额统计
// const getPriceCount = () => {
//   let query = {
//     ...queryParams.value,
//     startTime: queryParams.value.timeList.length ? queryParams.value.timeList[0] + ' 00:00:00' : undefined,
//     endTime: queryParams.value.timeList.length ? queryParams.value.timeList[1] + ' 23:59:59' : undefined,
//   }
//   delete query.timeList
//   delete query.pageNum
//   delete query.pageSize
//   priceCount(query).then(res => {
//       priceCountNo.value = res.data
//     })
//     .catch(err => {
//       ElMessage.error(err.message || `${text}失败`)
//     })
// }

//获取统计
const getPayCount = () => {
  let query = {
    ...queryParams.value,
    startTime: queryParams.value.timeList.length ? queryParams.value.timeList[0] + ' 00:00:00' : undefined,
    endTime: queryParams.value.timeList.length ? queryParams.value.timeList[1] + ' 23:59:59' : undefined,
  }
  delete query.timeList
  delete query.pageNum
  delete query.pageSize
  payPriceCount(query).then(res => {
      payPriceCountObj.value = res.data
    })
    .catch(err => {
      ElMessage.error(err.message || `${text}失败`)
    })
}

const success = () => {
  queryParams.value.pageNum = 10
  queryParams.value.pageNum = 1,
  getList()
}

//搜索
const SrarchList = () => {
  getList()
}

// 重置
const handleReset = () => {
   queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    timeList:[]
   }
   getList()
}

const handleChangeStatus = row => {
  console.log('row.status', row.status)
  changeStatusApi(row).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
    .catch(() => {
      getList()
    })
};

// 删除
const handleDel = row => {
  ElMessageBox.confirm(`此操作将永远删除该数据,是否继续?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let id = row.id
    del({ id })
      .then(res => {
        ElMessage.success(`删除成功`)
        getList()
      })
      .catch(err => {
        loading.value = false
        ElMessage.error(`删除失败`)
      })
  })
}
</script>
<script>
export default {
  // name: "store_admin",
}
</script>
<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  .page-inner {
    padding: 20px 15px;
  }
}
.context{
  font-weight: bold;
}
</style>
